<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <span>状态：</span>
          <el-radio-group v-model="selectedItems.status" @change="statusChange">
            <el-radio-button v-for="(item, index) in statusMaps" :label="item.value" name="status" :key="index">{{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
         <el-select v-model="selectedItems.query" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-form-item>
          <el-input :placeholder="selectedItems.query" v-model="selectedItems.keywords" @keyup.enter.native="doSearch"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="doSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="background: #13ce66" v-on:click="_reload">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="CollectTaskData" style="width: 100%" :row-class-name="tableRowClassName" v-loading="listLoading" element-loading-text="玩命请求中。。。">
      <el-table-column prop="id" label="ID" width="90">
      </el-table-column>
      <el-table-column prop="sn" label="期号" width="90">
      </el-table-column>
      <el-table-column prop="username" label="工作人员">
      </el-table-column>
      <el-table-column prop="status" label="任务状态" width="120" :formatter="showStatusText">
      </el-table-column>
      <el-table-column label="菜地信息">
        <template slot-scope="scope">
          <span>{{ scope.row.area_name }}{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="plant_name" label="当前植物">
      </el-table-column>
      <el-table-column prop="inventory" label="库存" width="100">
      </el-table-column>
      <el-table-column prop="accept_time" label="接单" width="180" :formatter="acceptTime">
      </el-table-column>
      <el-table-column prop="collecttime_update_time" label="校时" :formatter="collecttimeUpdateTime">
      </el-table-column>
      <el-table-column prop="active_collect_time" label="收菜" width="180" :formatter="activeCollectTime">
      </el-table-column>
      <el-table-column prop="finish_time" label="完成" width="180" :formatter="finishTime">
      </el-table-column>
      <el-table-column prop="active_yield" label="实产（斤）" width="100" :formatter="activeYield">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" v-if="scope.row.status === '2'" size="small" icon="check" @click.native="updateFrameShow(scope.row.id)">确认产量</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--修改实际产量-->
    <el-dialog title="修改实际产量" v-model="yieldFormVisible" :close-on-click-modal="false" style="margin: 0 auto;margin-top: 100px;width: 1200px;">
      <el-form :model="yieldForm" label-width="100px" :rules="yieldFormFormRules">
        <el-form-item label="实际产量(斤)">
          <el-input v-model="yieldForm.activeYield" auto-complete="off" icon="edit"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="yieldFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="updateActiveYield" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentPageChange"
        :page-size="30"
        layout="prev, pager, next, jumper"
        :total="total" style="float:right;" :current-page="parseInt(selectedItems.page)">
      </el-pagination>
      <span style="float: right;margin-top: 6px;margin-right: 5px">共 {{ total }} 条数据</span>
    </el-col>

  </section>
</template>

<script type="text/ecmascript-6">
  import util from '../../util'
  import NProgress from 'nprogress'
  import { apiTree } from '../../apiTree'
  
  export default {
    name: 'collect',
    data() {
      return {
        CollectTaskData: [],
        total: 0,
        listLoading: false,
        yieldFormVisible: false,
        statusMaps: [
          {value: 0, label: '待确认'},
          {value: 1, label: '已确认'},
          {value: 2, label: '等运营确认'},
          {value: 3, label: '完成'}
        ],
        options: [
          {value: 'username', label: '工作人员名'},
          {value: 'sn', label: '期号'},
          {value: 'id', label: 'ID'},
          {value: 'plant_name', label: '植物名'}
        ],
        editLoading: false,
        // 编辑界面数据
        yieldForm: {
          activeYield: 0,
          id: 0
        },
        yieldFormFormRules: {
          activeYield: [
            {required: true, message: '请输入产量，单位为斤', trigger: 'blur'}
          ]
        },
        selectedItems: {
          page: this.$route.query.page !== undefined ? this.$route.query.page : 1,
          status: this.$route.query.status !== undefined ? this.$route.query.status : 0,
          query: this.$route.query.query !== undefined ? this.$route.query.query : '',
          keywords: this.$route.query.keywords !== undefined ? this.$route.query.keywords : ''
        }
      }
    },
    methods: {
      // 产量由g转化为斤
      activeYield(row) {
        return Math.floor(parseInt(row.active_yield) / 500)
      },
      // 搜索查询
      doSearch() {
        if (this.selectedItems.query) {
          this.$router.push({path: this.$route.path, query: this.selectedItems})
        }
      },
      // 完成时间
      finishTime(row) {
        return row.finish_time === '0' ? 0 : this.formatTime(row.finish_time)
      },
      // 实际收菜时间
      activeCollectTime(row) {
        return row.active_collect_time === '0' ? 0 : this.formatTime(row.active_collect_time)
      },
      // 收菜修改时间
      collecttimeUpdateTime(row) {
        return row.collecttime_update_time === '0' ? 0 : this.formatTime(row.collecttime_update_time).substr(0, 10)
      },
      // 接单时间
      acceptTime(row) {
        return row.accept_time === '0' ? 0 : this.formatTime(row.accept_time)
      },
      
      // 改变时间
      formatTime(_time) {
        return util.formatDate.format(new Date(_time * 1000), 'yyyy-MM-dd hh:mm:ss')
      },
      // 状态
      statusChange() {
        this.$router.push({path: this.$route.path, query: this.selectedItems})
      },
      // 页码
      currentPageChange(val) {
        this.selectedItems.page = val
        this.$router.push({path: this.$route.path, query: this.selectedItems})
      },
      // 显示状态明文
      showStatusText(row) {
        if (row.status === '0') {
          return '待确认'
        } else if (row.status === '1') {
          return '已确认'
        } else if (row.status === '2') {
          return '等运营确认'
        } else {
          return '完成'
        }
      },
      tableRowClassName(row, index) {
        if (row.status === '2') {
          return 'info-row'
        } else if (row.status === '3') {
          return 'positive-row'
        }
        return ''
      },
      // 显示修改框
      updateFrameShow(id) {
        this.yieldFormVisible = true
        this.yieldForm.id = id
      },
      // 修改实际产量
      updateActiveYield() {
        if (!util.isInt(this.yieldForm.activeYield) || util.isEmpty(this.yieldForm.activeYield)) {
          this.$message.error('请输入数字')
          return
        }
        let param = {'active_yield': this.yieldForm.activeYield, 'collect_task_id': this.yieldForm.id}
        apiTree('collect/index', 'task/updateActiveYield', param).then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.yieldFormVisible = false
            this.workerCollectPlantList()
          } else {
            this.$message.error(res.err_str);
          }
        })
      },
      _reload() {
        this.workerCollectPlantList()
      },
      workerCollectPlantList() {
        let para = this.$route.query
        if (util.isEmptyObject(para)) {
          this.selectedItems = {
            page: 1,
            status: 0,
            query: '',
            keywords: ''
          }
        }
        NProgress.start()
        this.listLoading = true
        apiTree('collect/index', 'task/collectManageList', para).then((res) => {
          this.CollectTaskData = res.d.data
          this.total = res.d.total_num
          this.listLoading = false
          NProgress.done()
        })
      }
    },
    created() {
      this.workerCollectPlantList()
    },
    watch: {
      $route: 'workerCollectPlantList'
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  .el-table .info-row
    background #c9e5f5
  .el-table .positive-row
    background #e2f0e4
</style>
